import React, { Component } from 'react'
import  './fastNav.less'
import { Modal,List,Icon} from 'antd-mobile';
const Item = List.Item;
const Fragment = React.Fragment
class FastNav extends Component {
    constructor() {
        super()
        this.state ={
            fastModal:false,
        }

    }

    onClose =()=>{
        this.setState({
            fastModal: false,
        })
    }
    showFastModal =()=>{
        this.setState({
            fastModal:true,
        })
    }

    render() {
        return (
            <Fragment>
                <div className="nav" onClick={this.showFastModal}>
                    <div  className='info'>快捷导航</div>
                    <div className='icon'></div>
                </div>
                <Modal
                    popup
                    visible={this.state.fastModal}
                    onClose={this.onClose}
                    animationType="slide-up"
                    maskClosable={true}
                    className='fastNavPounp'
                    wrapClassName='fastNavPounpwrap'
                >
                    <List>
                        <div className='prounpHeader'>
                                快捷导航
                                <div className='close'
                                  onClick={this.onClose}
                                >
                                <Icon type="cross" />
                                </div>
                        </div>                 
                        <Item arrow="horizontal" onClick={() => { }}>个人中心</Item>
                        <Item arrow="horizontal" onClick={() => { }}>订单列表</Item>
                    </List>
                </Modal>
            </Fragment>
        )
    }

}

export default FastNav;